<style scoped lang="less">
.uni-device-list {
  position: relative;
  .back {
    position: absolute;
	right: 0;
	top:-40px
  }
}
</style>
<template>
  <div class="uni-device-list">
    <div class="uni-iot-title flex v-c">
      <i class="line flex-1"></i>
      <h2>{{ title }}</h2>
      <i class="line flex-1"></i>
    </div>
    <el-row class="device-list" :gutter="18">
      <el-col :span="6" v-for="(item, index) in dataList" :key="index">
        <DeviceItem
          :type="alarmType"
          :data="item"
          @update="updateAction"
        ></DeviceItem>
      </el-col>
	  <el-button class="back" v-if="isChildren==1" @click="back">返回</el-button>

    </el-row>
    <p class="data-none" v-if="dataList.length == 0">暂无相关设备</p>

    <el-pagination
      v-if="total > 0"
      class="text-right mt-20 mr-20"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, total, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import DeviceItem from "@/components/census/unitIOT/UnitDeviceItem.vue";
export default {
  name: "iotBlk",
  props: {
    alarmType: {
      type: String,
      default: "normal",
    },
  },
  components: {
    DeviceItem,
  },
  computed: {
    title() {
      let title = "";
      switch (this.alarmType) {
        case "normal":
          title = "正常设备";
          break;
        case "offline":
          title = "离线设备";
          break;
        case "alarm":
          title = "报警设备";
          break;
      }
      return title;
    },

    alarmTypeId() {
      let id = "";
      switch (this.alarmType) {
        case "normal":
          id = "1";
          break;
        case "offline":
          id = "3";
          break;
        case "alarm":
          id = "2";
          break;
        default:
          id = "4";
          break;
      }
      return id;
    },
  },
  data() {
    return {
      businessId: this.$route.query.id,
      type: this.$route.query.type,
      loading: false,
      pageSize: 4,
      currentPage: 1,
      total: 0,
      dataList: [],
	  isChildren:2
    };
  },
  methods: {
    getData(page, filterForm) {
      let url = "/fireFightingIOT/device/deviceListPage";
      // switch(this.type){
      // 	case 'pool':
      // 		url = '/firewater/device/deviceListPage'
      // 		break
      // 	case 'smoke':
      // 		url = '/independentsmoke/device/deviceListPage'
      // 		break
      // 	case 'monitor':
      // 		url = '/firefightingvisualization/device/deviceListPage'
      // 		break
      // 	case 'fire':
      // 		url = '/electricfire/device/deviceListPage'
      // 		break
      // 	case 'gas':
      // 		url = '/combustiblegas/device/deviceListPage'
      // 		break
      // 	case 'fireControl':
      // 	 	url = '/fireFightingIOT/device/deviceListPage'
      // 	 	break
      // }
      // if(!url) return
      let params = Object.assign(
        {
          page: page,
          limit: this.pageSize,
          currentstate: this.alarmTypeId,
          deviceClassify: this.config.typeMap[this.type],
          businessId: this.businessId,
          isChildren: this.isChildren,
        },
        filterForm
      );
      this.$get(url, params).then(
        (res) => {
          this.closeFullLoading();
          let data = res.data;
          this.currentPage = page;
          this.total = data.totalSize;
          this.dataList = data.Items;
        },
        (err) => {
          this.closeFullLoading();
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    handleCurrentChange(page) {
      this.getData(page);
    },
    updateAction(isChildren) {
      this.isChildren = isChildren;
      this.getData(this.currentPage);
    },
	back(){
		this.isChildren=this.isChildren==1?2:1
		this.getData(1);
	}
  },
  created() {
    //
  },
};
</script>
